import React, { useState, useMemo, useEffect } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { EffectCoverflow, Autoplay, Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/effect-coverflow';
import 'swiper/css/navigation';
import './imgSwiper.scss';
// import VideoBackground from '../videoBackground/videoBackground';
import CoinFountain from '../coinFountain/coinFountain';


const ImgSwiper: React.FC<any> = (props) => {
  const { ImgSwiperData } = props;
  const [currentIndex, setCurrentIndex] = useState(0);
  const [flagArray, setFlagArray] = useState<{ flag: boolean }[]>([]);
  // 使用useMemo优化处理图片数组的逻辑
  const processedImages = useMemo(() => {
    if (ImgSwiperData.length === 0) {
      return [];
    }
    if (ImgSwiperData.length === 2) {
      // 复制数组形成3D轮播效果
      return [...ImgSwiperData, ...ImgSwiperData, ...ImgSwiperData];
    } else if (ImgSwiperData.length === 3 || ImgSwiperData.length === 4) {
      return [...ImgSwiperData, ...ImgSwiperData];
    } else {
      return ImgSwiperData;
    }
  }, [ImgSwiperData]);

  // 使用usImgSwiperDataeMemo优化displayImages的计算
  const displayImages = useMemo(() => {
    return processedImages.length > 0 ? processedImages : ImgSwiperData;
  }, [processedImages, ImgSwiperData]);
  useEffect(() => {
    if (displayImages) {
      const newFlagArray = displayImages.map((item: any) => ({
        flag: item.noticeContent?.includes('金额') || false
      }));
      setFlagArray(newFlagArray);
    }
  }, [displayImages]);

  const handleSlideChange = (swiper: any) => {
    setCurrentIndex(swiper.realIndex);
  }

  if (displayImages.length === 0) {
    return (
      <div className="screen-saver-page">
        <img className="screen-bg" src={require("@/assets/img/screen-bg.jpg")} alt="" />
      </div>
    );
  }

  return (
    <>
      {
        displayImages?.length > 0 && flagArray?.length > 0 &&
        <div className="screen-saver-page">
          <img className="screen-bg" src={require("@/assets/img/screen-bg.jpg")} alt="" />
          <div className="img-swiper-container">
            <div className="swiper-wrapper">
              {
                displayImages?.length === 1 ?
                  <div className="single">
                    <div className="swiper-title">{displayImages[0].noticeTitle}</div>
                    <div className="swiper-content">{displayImages[0].noticeContent}</div>
                  </div>
                  :
                  <Swiper
                    effect="coverflow"
                    grabCursor={true}
                    centeredSlides={true}
                    slidesPerView={3}
                    spaceBetween={50}
                    loop={true}
                    watchSlidesProgress={true}
                    watchOverflow={true}
                    autoplay={{
                      delay: 5000,
                    }}
                    coverflowEffect={{
                      rotate: 0,
                      stretch: 1,
                      depth: 200,
                      modifier: 0.5,
                      slideShadows: false,
                    }}
                    modules={[EffectCoverflow, Autoplay, Navigation]}
                    navigation={false}
                    onSlideChange={handleSlideChange}
                    onAfterInit={(swiper: any) => {
                      // 强制更新视图，确保只显示3个图片
                      setTimeout(() => {
                        swiper.update();
                      }, 100);
                    }}
                    className="img-swiper"
                    style={{ overflow: 'hidden' }}
                  >
                    {displayImages.length > 1 && displayImages.map((item: any, index: number) => (
                      <SwiperSlide key={`${item.noticeTitle}${index}`} className="swiper-slide">
                        {/* <div className="swiper-title">{item.noticeTitle}</div> */}
                        <div className="swiper-content">{item.noticeContent}</div>
                      </SwiperSlide>
                    ))}
                  </Swiper>
              }
            </div>
            {
              flagArray[currentIndex].flag &&
              // <VideoBackground activeData={true}></VideoBackground>
              <div className="gold-coin">
                <CoinFountain activeData={true}></CoinFountain>
              </div>
            }
          </div>
        </div>
      }
    </>
  );
};

export default ImgSwiper;